<template>
    <div>
        <el-card class="!border-none p-4" shadow="never">
            <el-form
                ref="formRef"
                class="mb-[-16px] gap-4 flex flex-wrap"
                :model="queryParams"
                :inline="true"
            >
                <el-form-item v-if="grade !== 3" class="w-[280px]" label="所属区域">
                    <area-picker v-model="areas"></area-picker>
                </el-form-item>
                <el-form-item class="w-[280px]" label="主体名称">
                    <el-input
                        v-model="queryParams.entity_name"
                        placeholder="请输入主体名称"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="提交时间">
                    <daterange-picker
                        v-model:startTime="queryParams.create_time_start"
                        v-model:endTime="queryParams.create_time_end"
                    />
                </el-form-item>
                <!-- <el-form-item class="w-[280px]" label="注册来源">
                        <el-select v-model="queryParams.channel">
                            <el-option v-for="(item, key) in ClientMap" :key="key" :label="item" :value="key" />
                        </el-select>
                    </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="toSearch">查询</el-button>
                    <el-button @click="resetData">重置</el-button>
                    <export-data
                        class="ml-4"
                        :fetch-fun="getMain3List"
                        :params="queryParams"
                        :page-size="pager.size"
                    />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4 p-4" shadow="never">

            <div class="mb-4 text-center text-2xl font-bold">
                <span style="padding-right: 50px">主体总数: {{ pager.count }} </span>
                <span>产值 (万元)合计: {{ output }} </span>
            </div>
            <el-table
                size="large"
                v-loading="pager.loading"
                :data="pager.lists"
                style="--el-table-border-color: rgba(180, 185, 195, 2)"
            >
                <el-table-column label="主体名称" prop="entity_name" min-width="80" align="center">
                    <template #default="{ row }">
                        {{ row.entity_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="所属区域"
                    prop="comp_address"
                    min-width="100"
                    align="center"
                >
                    <template #default="{ row }">
                        {{
                            row.province_name
                                ? `${row.province_name}/${row.city_name}/${row.area_name}`
                                : '--'
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="类型" prop="type_info" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.type_info || '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="登记时间"
                    prop="registration_time"
                    min-width="50"
                    align="center"
                >
                    <template #default="{ row }">
                        {{ row.registration_time || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="信用代码" prop="credit_code" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.credit_code || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="法定代表人" prop="oper_name" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.oper_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="成立日期" prop="start_date" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.start_date || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="企业状态" prop="status" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.status || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="create_time" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.mobile || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="提交时间" prop="mobile" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.create_time || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['process.process/info']" type="primary" link>
                            <router-link
                                :to="{
                                    path: getRoutePath('process.process/info'),
                                    query: {
                                        id: row.id
                                    }
                                }"
                            >
                                详情
                            </router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="dialogVisible" :title="'图片查看'" width="50%">
                <el-carousel v-if="imageList.length" v-model="currentImageIndex" arrow="always">
                    <el-carousel-item v-for="(image, index) in imageList" :key="index">
                        <el-image :src="image" fit="contain" style="width: 100%; height: 200px" />
                    </el-carousel-item>
                </el-carousel>
            </el-dialog>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="consumerLists">
import config from '@/config'
import { ref, reactive, onActivated } from 'vue'
import { getMain3List, getPlantingList, getTotals3 } from '@/api/Planting'
import { ClientMap } from '@/enums/appEnums'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'

const formRef = ref(null)
const queryParams = reactive({
    entity_name: '',
    channel: '',
    create_time_start: '',
    create_time_end: '',
    province_id: '',
    city_id: '',
    area_id: ''
})
const areas = ref()

import useUserStore from '@/stores/modules/user.ts'
const userState = useUserStore()
const grade = computed(() => {
    return userState.userInfo.grade
})

const toSearch = () => {
    resetPage()
    getTotal()
}

const output = ref(0)
const getTotal = () => {
    getTotals3(queryParams).then((res) => {
        output.value = res.output
    })
}

watch(areas, (val) => {
    queryParams.province_id = val[0] || ''
    queryParams.city_id = val[1] || ''
    queryParams.area_id = val[2] || ''
})
const resetData = () => {
    areas.value = []
    resetParams()
    getTotal()
}

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getMain3List,
    params: queryParams,
    fixedParams: {
        category3: 1
    }
})

// 组件激活时获取列表数据
onActivated(() => {
    getLists()
})
getLists()
getTotal()
// // 组件挂载时获取列表数据
// onMounted(() => {
//     getLists()
// })

// 弹窗是否显示
const dialogVisible = ref(false)
// 当前图片列表
const imageList = ref<string[]>([])
// 当前图片索引
const currentImageIndex = ref(0)

// 打开图片浏览工具
const openImageGallery = (images: string[], index: number) => {
    imageList.value = images.map((img) => config.baseUrl + img)
    currentImageIndex.value = index
    dialogVisible.value = true
}
</script>
<style scoped lang="scss">
.el-form-item__label {
    font-weight: 500;
}

.el-card {
    padding: 16px;
}

.el-form {
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
}

.export-data {
    margin-left: 16px;
}
</style>
